<template>
  <div class="app">
    <div class="Login">
      <p style="font-family: 'AA'">登录</p>
      <el-form
        ref="fromRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="登录:" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input v-model="ruleForm.password" />
        </el-form-item>
      </el-form>
      <div class="bottom">
        <el-button style="background-color: #1f9098; color: #efefef" @click="UserLoginF()"
          >登录</el-button
        >
        <el-button style="background-color: #b7ddc7; color: #ffffff" @click="InputReset"
          >重置</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type FormRules, type FormInstance, ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 定义表单的数据类型接口
interface RuleForm {
  username: string
  password: string
}

//定义表单的数据
const ruleForm = ref<RuleForm>({
  username: 'admin',
  password: '123456'
})

//定义表单的验证规则
const rules = ref<FormRules<RuleForm>>({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 6, message: 'Length should be 3 to 6', trigger: 'blur' }
  ]
})
// 拿到登录请求
import { useLoginStore } from '@/stores/login'
const loginStore = useLoginStore()

//获取表单实例
const fromRef = ref<FormInstance | null>(null)

//定义登录按钮的事件
const UserLoginF = () => {
  fromRef.value?.validate(async (bool) => {
    if (!bool) return
    const oo = await loginStore.LOGIN_IN(ruleForm.value) //请求结果
    if (!oo) return //失败时
    // 成功时
    const path = route.query.redirect as string
    console.log(path, 2222)

    ElMessage.success('登录成功')
    router.replace(path ? path : '/Home')
  })
}

//定义重置按钮的点击事件
const InputReset = () => {
  ruleForm.value.username = ''
  ruleForm.value.password = ''
}
</script>

<style scoped>
@import url('../../FontCss/IconFontCss.css');
.app {
  width: 100vw;
  height: 100vh;
  background: rgb(0, 128, 142);
  background: linear-gradient(90deg, rgba(0, 128, 142, 1) 0%, rgba(220, 240, 211, 1) 100%);
  background-size: cover;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #329a9e;
}
.box {
  font-size: 60px;
  color: #fff;
  font-family: 'AA';
  margin-top: 30px;
}
.Login {
  width: 450px;
  height: 500px;
  background-color: #ccc;
  background-color: rgba(255, 255, 255, 0.5);
  margin-top: 100px;
  font-size: 30px;
  color: #fff;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(113, 224, 236);
}
.Login p {
  margin-top: 15px;
}
.el-form {
  width: 90%;
  margin: 20px auto;
}
::v-deep .el-form-item__label {
  color: #fff;
}
.el-input {
  height: 40px;
}
.el-form-item {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
}
.bottom {
  width: 100%;
  height: 50px;
  margin-top: 20px;
}
.el-button {
  width: 80px;
  height: 100%;
  border: #fff;
}
</style>
